<template>
  <div class="app-container customer-div">
    <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="first">跟进提醒</el-menu-item>
      <el-menu-item index="three">购买商品设置</el-menu-item>
      <el-menu-item index="two">客户其它采购</el-menu-item>
    </el-menu>


    <!--数据列表  跟进提醒-->
    <div class="table-container" v-if="tab == 'first'">
      <div style="margin-top: 40px">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery1" size="mini" label-width="80px">
          <el-form-item label="客户名称：">
            <el-select
                    clearable
                    v-model="listQuery1.customerId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="((val)=>{remoteMethod1(val, 3)})"
                    :loading="customerLoading3">
              <el-option
                      v-for="item in customerList3"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预计购买时间段：" label-width="130px">
            <el-date-picker
                    :default-time="['00:00:00', '23:59:59']"
                    v-model="listQuery1.nextBuyDate"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList1()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
              v-loading="listLoading1"
              :data="tableData1"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="客户" align="center" min-width="300">
          <template slot-scope="scope">
            {{scope.row.customerName}}
          </template>
        </el-table-column>
        <el-table-column  label="商品" align="center" min-width="150">
          <template slot-scope="scope">
            {{scope.row.goodsName}}
          </template>
        </el-table-column>
        <el-table-column  label="上次购买时间" align="center" min-width="100">
          <template slot-scope="scope">
            {{scope.row.buyDate}}
          </template>
        </el-table-column>
        <el-table-column  label="预计下次购买时间" align="center" min-width="150">
          <template slot-scope="scope">
            {{scope.row.nextBuyDate}}
          </template>
        </el-table-column>
        <el-table-column  label="业务员" align="center" min-width="100">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery1.pageNum"
                :page-size="listQuery1.pageSize"
                :page-sizes="[10,15,20]"
                :total="count1">
        </el-pagination>
      </div>
    </div>

    <!--数据列表  购买商品设置-->
    <div class="table-container" v-if="tab == 'three'">
      <div style="margin-top: 40px">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery3" size="mini" label-width="80px">
          <el-form-item label="客户名称：">
            <el-select
                    clearable
                    v-model="listQuery3.customerId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="((val)=>{remoteMethod1(val, 4)})"
                    :loading="customerLoading4">
              <el-option
                      v-for="item in customerList4"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品名：" label-width="130px">
              <el-input v-model="listQuery3.goodsName"></el-input>
          </el-form-item>
          <el-form-item label="商品：" label-width="130px">
            <el-select
                    clearable
                    v-model="listQuery3.goodsKingId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod4"
                    :loading="loading4">
              <el-option
                      v-for="item in options4"
                      :key="item.kingId"
                      :label="item.goodsSn"
                      :value="item.kingId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList3()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
              v-loading="listLoading3"
              :data="tableData3"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="客户" align="center" min-width="300">
          <template slot-scope="scope">
            {{scope.row.customerName}}
          </template>
        </el-table-column>
        <el-table-column  label="品名" align="center" min-width="150">
          <template slot-scope="scope">
            {{scope.row.goodsName}}
          </template>
        </el-table-column>
        <el-table-column  label="成交商品" align="center" min-width="150">
          <template slot-scope="scope">
            {{scope.row.goodsSn}}
          </template>
        </el-table-column>

        <el-table-column  label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="mini"
                    @click="showRelation(scope.row)">关联商品
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange3"
                @current-change="handleCurrentChange3"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery3.pageNum"
                :page-size="listQuery3.pageSize"
                :page-sizes="[10,15,20]"
                :total="count3">
        </el-pagination>
      </div>
    </div>


    <!--数据列表  客户其它采购-->
    <div class="table-container" v-if="tab == 'two'">
      <div style="margin-top: 40px">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery2" size="mini" label-width="80px">
          <el-form-item label="客户名称：">
            <el-select
                    clearable
                    v-model="listQuery2.customerId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="((val)=>{remoteMethod1(val, 2)})"
                    :loading="customerLoading2">
              <el-option
                      v-for="item in customerList2"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="购买时间：">
            <el-date-picker
                    :default-time="['00:00:00', '23:59:59']"
                    v-model="listQuery2.createTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList2()"
                    type="primary">
              查询
            </el-button>
            <el-button
                    @click="showDialog2()"
                    type="primary">
              批量新增
            </el-button>

            <el-button
                    v-if="otherOrderListExport"
                    :loading="btnloading4"
                    @click="downloadExcel"
                    type="primary">
              导出
            </el-button>

          </el-form-item>
        </el-form>
      </div>
      <el-table
              v-loading="listLoading2"
              :data="tableData2"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column
                label="客户"
                min-width="150"
                align="center">
          <template slot-scope="scope">
            {{scope.row.customerName}}
          </template>
        </el-table-column>
        <el-table-column  label="商品" min-width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.goodsName}}
          </template>
        </el-table-column>
        <el-table-column
                label="购买时间"
                min-width="150"
                align="center">
          <template slot-scope="scope">
            {{scope.row.createTime}}
          </template>
        </el-table-column>
        <el-table-column
                label="数量"
                min-width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.goodsNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="成交单价"
                min-width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.goodsPrice}}
          </template>
        </el-table-column>
        <el-table-column
                label="库存数量"
                min-width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.goodsStock}}
          </template>
        </el-table-column>
        <el-table-column
                label="类型"
                min-width="100"
                align="center">
          <template slot-scope="scope">
              {{scope.row.buyType}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="供应商"
                min-width="150">
          <template slot-scope="scope">
            {{scope.row.supplierName}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="操作时间"
                min-width="150">
          <template slot-scope="scope">
            {{scope.row.operateTime}}
          </template>
        </el-table-column>
        <el-table-column
                prop="operateName"
                label="操作人"
                width="100"
                align="center">
        </el-table-column>
        <el-table-column
                align="center"
                prop="remark"
                label="上次采购时间"
                min-width="150">
          <template slot-scope="scope">
            <div style="font-size:12px;padding-bottom:10px;">{{scope.row.lastOrderTime}}</div>
          </template>
        </el-table-column>
        <el-table-column
                min-width="150"
                fixed="right"
                label="操作"
                align="center">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="mini"
                    @click="showDialog(scope.row)">修改
            </el-button>
            <el-button
                    type="text"
                    size="mini"
                    @click="delRow(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery2.pageNum"
                :page-size="listQuery2.pageSize"
                :page-sizes="[10,15,20]"
                :total="count2">
        </el-pagination>
      </div>
    </div>



    <!--编辑采购记录-->
    <el-dialog
            title="编辑采购记录"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible1"
            width="500px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="120px" ref="form1" :model="form1" :rules="rules1">
          <el-form-item label="品名：" prop="goodsName">
            <el-select v-model="form1.goodsName" filterable placeholder="请选择" disabled>
              <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="牌号：" prop="goodsSn" >
            <el-select
                    disabled
                    clearable
                    v-model="form1.goodsSn"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod2"
                    :loading="loading2">
              <el-option
                      v-for="item in options2"
                      :key="item.kingId"
                      :label="item.goodsSn"
                      :value="item.kingId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量：" prop="goodsNum">
            <el-input v-model.number="form1.goodsNum" type="number" style="width:150px;"></el-input>
          </el-form-item>
          <el-form-item label="单价：" prop="goodsPrice">
            <el-input v-model.number="form1.goodsPrice" type="number" style="width:150px;"></el-input>
          </el-form-item>
          <el-form-item label="购买时间：" prop="operateTime">
            <el-date-picker
                    style="width:130px"
                    value-format="yyyy-MM-dd"
                    v-model="form1.buyDate"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="类型：" >
            <el-radio-group v-model="form1.buyType">
              <el-radio label="正常采购" value="normal"></el-radio>
              <el-radio label="囤货" value="batch"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="仓位：" >
            <el-input v-model.number="form1.goodsStock" type="number" style="width:150px;"></el-input>
          </el-form-item>
          <el-form-item label="供应商：" >
            <el-input v-model.number="form1.supplierName" ></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="form1.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose1" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm1" :loading="btnLoading1" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--批量新增-->
    <el-dialog
            title="批量新增"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible2"
            width="900px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini"  ref="form2" :model="form2" :rules="rules2">
            <el-form-item label-width="80" label="客户名称" prop="customerId">
              <el-select
                      clearable
                      v-model="form2.customerId"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="请输入关键词"
                      :remote-method="((val)=>{remoteMethod1(val, 1)})"
                      :loading="customerLoading1">
                <el-option
                        v-for="item in customerList1"
                        :key="item.customerId"
                        :label="item.customerName"
                        :value="item.customerId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-table :data="form2.ordGoodsList" border style="width:99%">
              <el-table-column
                      align="center"
                      label="牌号"
                      min-width="150">
                <template slot-scope="scope">
                  <el-form-item :prop="`ordGoodsList.${scope.$index}.goodsKingId`" :rules="rules2.goodsKingId">
                    <el-select
                            clearable
                            v-model="scope.row.goodsKingId"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="((val)=>{remoteMethod3(val, scope.$index)})"
                            :loading="scope.row.loading">
                      <el-option
                              v-for="item in scope.row.options"
                              :key="item.kingId"
                              :label="item.goodsSn"
                              :value="item.kingId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="数量"
                      min-width="100">
                <template slot-scope="scope">
                  <el-form-item :prop="`ordGoodsList.${scope.$index}.goodsNum`" :rules="rules2.goodsNum">
                      <el-input-number style="width:80px" v-model="scope.row.goodsNum" :controls="false" :precision="2" class="inputleft"></el-input-number>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="单价"
                      min-width="100">
                <template slot-scope="scope">
                  <el-form-item :prop="`ordGoodsList.${scope.$index}.goodsPrice`" :rules="rules2.goodsPrice">
                    <el-input-number style="width:80px" v-model="scope.row.goodsPrice" :controls="false" :precision="2" class="inputleft"></el-input-number>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="购买时间"
                      min-width="150">
                <template slot-scope="scope">
                  <el-form-item :prop="`ordGoodsList.${scope.$index}.buyDate`" :rules="rules2.buyDate">
                    <el-date-picker
                            style="width:130px"
                            value-format="yyyy-MM-dd"
                            v-model="scope.row.buyDate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="类型"
                      min-width="150">
                <template slot-scope="scope">
                  <el-form-item >
                    <el-select v-model="scope.row.buyType">
                      <el-option key="normal" label="正常采购" value="normal"></el-option>
                      <el-option key="batch" label="囤货" value="batch"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="仓位"
                      min-width="150">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input-number style="width:120px" v-model="scope.row.goodsStock" :controls="false" :precision="2" class="inputleft"></el-input-number>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="供应商"
                      min-width="150">
                <template slot-scope="scope">
                  <el-form-item >
                   <el-input v-model="scope.row.supplierName"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="备注"
                      min-width="150">
                <template slot-scope="scope">
                  <el-form-item >
                    <el-input v-model="scope.row.remark"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                      fixed="right"
                      align="center"
                      label="操作"
                      min-width="100">
                <template slot-scope="scope">
                      <el-button type="text" v-if="scope.$index > 0" @click="delFormRow(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button size="small" style="margin-top:10px;" @click="addRow"> 增加一条 </el-button>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right;margin-top:10px">
          <el-button @click="handleClose2" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--关联商品-->
    <el-dialog
            title="关联商品"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible3"
            width="500px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini"  ref="form3" :model="form3" :rules="rules3">
          <el-form-item label-width="100px" label="客户名称：">
               {{form3.customerName}}
          </el-form-item>
          <el-form-item label-width="100px" label="商品：" >
            {{form3.goodsSn}}
          </el-form-item>
          <el-form-item label-width="100px" label="关联商品：">
             <el-checkbox-group v-model="form3.selectList">
                <el-checkbox v-for="item in form3.goodsList" :label="item.bgId" :key="item.bgId">{{item.goodsName}} / {{item.goodsSn}}</el-checkbox>
             </el-checkbox-group>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right;margin-top:10px">
          <el-button @click="handleClose3" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  import {editDayRule,delDayRule,weekRuleList,
    dayRuleListApi,editWeekRule,getCustomerOption,getGoodsClass,addOtherOrder,otherOrderList,buyRemindList,delOtherOrder} from '@/api/partner'
  import {goodsList,customersBuyGoodsList,goodsRelationData,relationBuyGoods} from '@/api/company'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'

  const defaultListQuery1={
    pageNum: 1,
    pageSize: 10,
    nextBuyDate:[],
    customerId:'',
  };

  const defaultListQuery2={
    pageNum: 1,
    pageSize: 10,
    createTime:[],
    customerId:'',
  };

  const defaultListQuery3={
    pageNum: 1,
    pageSize: 10,
    customerId:'',
    goodsName:'',
    goodsKingId:'',
  };

  const defaultForm1={
    orderId : '',
   customerId :'',
   goodsName :'',
   goodsSn :'',
   goodsNum : '',
   goodsPrice :'',
   goodsStock :'',
   supplierName :'',
   buyType:'',
   buyDate :'',
   remark :'',
  };
  const defaultRow = {
    goodsName:'',
    goodsKingId:'',
    goodsNum:'',
    goodsPrice:'',
    goodsStock:'',
    supplierName:'',
    buyType:'normal',
    buyDate:'',
    remark:'',
    options:[],
    loading:false,
  };
  const defaultForm2={
    customerId:'',
    ordGoodsList:[{
      goodsName:'',
      goodsKingId:'',
      goodsNum:'',
      goodsPrice:'',
      goodsStock:'',
      supplierName:'',
      buyType:'normal',
      buyDate:'',
      remark:'',
      options:[],
      loading:false,
    },]
  }

  const defaultForm3={
    bgId: '',
    customerName: "",
    goodsList: [],
    goodsName: "",
    goodsSn: ""
  }





  export default {
    name: "index",
    data() {

      return {
        listQuery1: JSON.parse(JSON.stringify(defaultListQuery1)),
        tableData1: [],
        count1: 0,
        listLoading1: false,
        dialogVisible1: false,
        form1: JSON.parse(JSON.stringify(defaultForm1)),
        btnLoading1: false,
        rules1: {
          goodsName: [{required: true, message: '此项必填', trigger: 'change'},],
          goodsSn: [{required: true, message: '此项必填', trigger: 'change'},],
          goodsNum: [{required: true, message: '此项必填', trigger: 'blur'},],
          goodsPrice: [{required: true, message: '此项必填', trigger: 'blur'},],
          buyDate: [{required: true, message: '此项必填', trigger: 'change'},],
        },
        listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
        tableData2: [],
        count2: 0,
        listLoading2: false,
        dialogVisible2: false,
        form2: JSON.parse(JSON.stringify(defaultForm2)),
        btnLoading2: false,
        rules2: {
          customerId: [{required: true, message: '此项必填', trigger: 'change'},],
          goodsKingId: [{required: true, message: '此项必填', trigger: 'change'},],
          goodsNum: [{required: true, message: '此项必填', trigger: 'blur'},],
          goodsPrice: [{required: true, message: '此项必填', trigger: 'blur'},],
          buyDate: [{required: true, message: '此项必填', trigger: 'change'},],
        },
        tab: 'first',
        options: [],
        options2: [],
        loading2: false,
        customerLoading1: false,
        customerList1: [],
        customerLoading2: false,
        customerList2: [],
        customerLoading3: false,
        customerList3: [],
        customerLoading4: false,
        customerList4: [],

        listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
        tableData3: [],
        count3: 0,
        listLoading3: false,

        dialogVisible3: false,
        form3: JSON.parse(JSON.stringify(defaultForm3)),
        btnLoading3: false,
        rules3: {

        },
        options4: [],
        loading4: false,

        btnloading4:false,
        roles:store.getters.roles ? store.getters.roles : [],
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),
      otherOrderListExport(){
        if(this.roles.indexOf("otherOrderListExport") != -1){
          return true
        }else{
          return false
        }
      },

    },
    created() {
      this.getOptions();
      this.getList1();
      this.getList2();
      this.getList3()
    },
    filters: {},
    methods: {
      //下载excle
      downloadExcel(){
        let params = JSON.parse(JSON.stringify(this.listQuery2));
        params.isExport = 1;
        this.btnloading4 = true;
        otherOrderList(params).then((res)=>{
          this.btnloading4 = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnloading4 = false;
        })
      },

      //下载表格数据格式化
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },


      //显示商品关联
      showRelation(item){
        this.dialogVisible3 = true;
        goodsRelationData({bgId:item.bgId}).then((res)=>{
            this.form3 = res;
            this.$set(this.form3,'selectList',[]);
            this.form3.goodsList.forEach((el)=>{
              if(el.isHasRelation){
                this.form3.selectList.push(el.bgId)
              }
            })
        })
      },

      //关闭商品关联
      handleClose3() {
        this.dialogVisible3 = false;
        this.$refs.form3.clearValidate();
      },

      //提交商品关联
      handleConfirm3() {
        this.$refs.form3.validate((valid) => {
          if (valid) {
            this.btnLoading3 = true;
            let data = {};
            data.bgId = this.form3.bgId;
            data.relationBgIds = this.form3.selectList;
            relationBuyGoods(data).then(response => {
              this.btnLoading3 = false;
              this.handleClose3();
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              });
              this.getList3();
            }).catch(() => {
              this.btnLoading3 = false;
            })
          }
        })
      },

      //获取牌号列表
      remoteMethod4(query) {
        if (query !== '') {
          this.loading4 = true;
          goodsList({keywords: query}).then((res) => {
            this.options4 = res.list;
            this.loading4 = false;
          }).catch(() => {
            this.loading4 = false;
          });
        } else {
          this.options4 = [];
        }
      },

      handleSearchList3(){
        this.listQuery3.pageNum = 1;
        this.getList3();
      },
      handleSizeChange3(val) {
        this.listQuery3.pageNum = 1;
        this.listQuery3.pageSize = val;
        this.getList3();
      },
      handleCurrentChange3(val) {
        this.listQuery3.pageNum = val;
        this.getList3();
      },


      //获取商品设置列表
      getList3() {
        this.listLoading3 = true;
        customersBuyGoodsList(this.listQuery3).then(response => {
          this.tableData3 = response.list;
          this.count3 = response.count;
          this.listLoading3 = false;
        }).catch(() => {
          this.listLoading3 = false;
        });
      },
      addRow(){
        this.form2.ordGoodsList.push(defaultRow)
      },
      delFormRow(index){
        this.form2.ordGoodsList.splice(index,1)
      },
      //获取客户列表
      remoteMethod1(query,key) {
        if(query && query!= '') {
          this['customerLoading'+key] = true;
          getCustomerOption({keywords: query}).then(response => {
            this['customerList'+key] = response;
            this['customerLoading'+key] = false;
          }).catch(() => {
            this['customerLoading'+key] = false;
          });
        }
      },


    //获取品名列表
    getOptions() {
      getGoodsClass().then((res) => {
        this.options = res;
      })
    },


    remoteMethod3(key, index) {
      this.form2['ordGoodsList'][index]['loading'] = true;
      goodsList({keywords: key}).then((res) => {
        this.form2['ordGoodsList'][index]['options'] = res.list;
        this.form2['ordGoodsList'][index]['loading'] = false;
      }).catch(() => {
        this.form2['ordGoodsList'][index]['loading'] = false;
      })
    },
      handleSearchList1(){
        this.listQuery1.pageNum = 1;
        this.getList1();
      },
    handleSizeChange1(val) {
      this.listQuery1.pageNum = 1;
      this.listQuery1.pageSize = val;
      this.getList1();
    },
    handleCurrentChange1(val) {
      this.listQuery1.pageNum = val;
      this.getList1();
    },


    //获取跟进提醒
    getList1() {
      this.listLoading1 = true;
      buyRemindList(this.listQuery1).then(response => {
        this.tableData1 = response.list;
        this.count1 = response.count;
        this.listLoading1 = false;
      }).catch(() => {
        this.listLoading1 = false;
      });
    },

      handleSearchList2(){
        this.listQuery2.pageNum = 1;
        this.getList2();
      },

    handleSizeChange2(val) {
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getList2();
    },
    handleCurrentChange2(val) {
      this.listQuery2.pageNum = val;
      this.getList2();
    },


    //获取客户其它采购计划
    getList2() {
      this.listLoading2 = true;
      otherOrderList(this.listQuery2).then(response => {
        this.tableData2 = response.list;
        this.count2 = response.count;
        this.listLoading2 = false;
      }).catch(() => {
        this.listLoading2 = false;
      });
    },

    //获取牌号列表
    remoteMethod2(query) {
      if (query !== '') {
        this.loading2 = true;
        goodsList({keywords: query}).then((res) => {
          this.options2 = res.list;
          this.loading2 = false;
        }).catch(() => {
          this.loading2 = false;
        });
      } else {
        this.options2 = [];
      }
    },

    //客户名称输入匹配
    querySearch(queryString, cb) {
      getCustomerOption({keywords: queryString}).then((res) => {
        cb(res);
      })
    },


    //选择客户名称
    handleSelectCustomerName(item) {
      this.listQuery.keywords = item.customerName
    },


    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath) {
      this.tab = key
      console.log(this.tab)
    },

    //显示批量新增
    showDialog2() {
      this.dialogVisible2 = true;
      this.form2 = JSON.parse(JSON.stringify(defaultForm2));

    },

    //关闭批量新增
    handleClose2() {
      this.dialogVisible2 = false;
      this.$refs.form2.clearValidate();
    },

    //提交批量新增
    handleConfirm2() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          addOtherOrder(this.form2).then(response => {
            this.btnLoading2 = false;
            this.handleClose2();
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.getList2();
          }).catch(() => {
            this.btnLoading2 = false;
          })
        }
      })
    },


    //显示编辑
    showDialog(item) {
      this.dialogVisible1 = true;
      this.form1.orderId = item.orderId;
      this.form1.customerId = item.customerId;
      this.form1.goodsName = item.goodsName;
      this.form1.goodsSn = item.goodsSn;
      this.form1.goodsNum = item.goodsNum;
      this.form1.goodsPrice = item.goodsPrice;
      this.form1.goodsStock = item.goodsStock;
      this.form1.supplierName = item.supplierName;
      this.form1.buyType = item.buyType;
      this.form1.buyDate = item.createTime;
      this.form1.remark = item.remark;
    },

    //关闭编辑
    handleClose1() {
      this.dialogVisible1 = false;
      this.$refs.form1.clearValidate();
    },

    //提交采购计划
    handleConfirm1() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          this.btnLoading1 = true;
          let data = {};
          data.customerId = this.form1.customerId;
          data.ordGoodsList = [];
          data.ordGoodsList.push({
          orderId : this.form1.orderId,
          goodsName : this.form1.goodsName,
          goodsSn : this.form1.goodsSn,
          goodsNum :  this.form1.goodsNum,
          goodsPrice : this.form1.goodsPrice,
          goodsStock : this.form1.goodsStock,
          supplierName :this.form1.supplierName,
          buyType : this.form1.buyType,
          buyDate : this.form1.buyDate,
          remark :this.form1.remark,
          })
          addOtherOrder(data).then(response => {
            this.btnLoading1 = false;
            this.handleClose1();
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.getList2();
          }).catch(() => {
            this.btnLoading1 = false;
          })
        }
      })
    },


    //删除采购记录
    delRow(item) {
      this.$confirm('确定删除此条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOtherOrder({ orderId: item. orderId}).then(() => {
          this.getList2();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
   },

  }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
